<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/pruductinfo.css" />
	</head>
	<body>
		<div class="header">
			<div class="nav">
				<div class="littletop"></div>
				<div class="navtitle">
					<div class="title">
						<a href="##" class="logo">
							<img src="img/logo.png" />
						</a>
						<div class="titlelist">
							<ul>
								<li>
									<a href="##">首页</a>
								</li>
								<li>
									<a href="##">手机数码</a>
								</li>
								<li>
									<a href="##">电脑办公</a>
								</li>
								<li>
									<a href="##">衣服用品</a>
								</li>
								<li>
									<a href="##">购物车</a>
								</li>
							</ul>
						</div>
						<div class="tatoo">
							<ul>
								<li>
									<a href="##" class="search">
										<i class="icon-search"></i>
										<input type="text" value="搜索" name="search" />
									</a>
								</li>
								<li>
									<a href="##" class="login">
										<i class="icon-login"></i>
										<span>登录</span>
									</a>
								</li>
								<li>
									<a href="##" class="cart">
										<i class="icon-cart"></i>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="content">
			<div class="contenttitle">
				<ul>
					<li>
						<a href="##">网上商城 </a>
					</li>
					<li>&gt;</li>
					<li>
						<a href="##">智能手机  </a>
					</li>
					<li>&gt;</li>
					<li>
						<a href="##"> Galaxy A6s </a>
					</li>
				</ul>
			</div>
			<div class="center">
				 <div class="centerleft">
					<div class="icon-active-box">
						<label class="icon-orange">
						<span>免息</span>
					</label>
						<label class="icon-orange">
						<span>立减</span>
					</label>
						<label class="icon-orange">
						<span>买赠</span>
					</label>
					</div>
					<div class="changeimg">
						<img src="img/bigimg.jpg" id="bigimg" />
						<div id="smallpic">
							<a href="##">
								<img src="img/sma1.jpg" />
							</a>
							<a href="##">
								<img src="img/sma2.jpg" />
							</a>
							<a href="##">
								<img src="img/bigimg.jpg" />
							</a>
							<a href="##">
								<img src="img/phone.jpg" />
							</a>
						</div>
					</div>
				</div>
				 <div class="centerright">
					<div class="rightside">
						<h1>Galaxy A6s</h1>
					<div class="rightsidetext">
					<p></p>
					<div class="rightsidetext">
						<ul>
							<li><span>卖点</span>大视野全面屏、6GB运行内存 2400万感光单元</li>
							<li><span>优惠</span>下单优惠100元</li>
							<li><span>赠品</span>钢铁侠10000mAh移动电源+优酷季卡（签收后申领）+手机充电支架</li>
							<li><span>免息</span>购机至高享6期免息分期</li>
							<li><span>尊享服务</span>6个月优惠换屏、1年延长保修服务（需在三星生活助手中申领）</li>
					</ul>
							</div>
							<p></p>
						</div>
						<div class="choose">
							<label>颜色</label>
							<ul>
								<li class="active">
									<a>
										<label class="icon-choose">
										<i style="border-radius: 50%; background: #01b1e2;"></i>
										<itempropertyname>花木蓝</itempropertyname><br>
										</label>
										<div class="icon-color-opacity"></div>
									</a>
								</li>
								<li>
									<a>
										<label class="icon-choose">
										<i style="border-radius: 50%; background: #ae719a;"></i>
										<itempropertyname>花仙紫</itempropertyname><br>
										</label>
										<div class="icon-color-opacity"></div>
									</a>
								</li>
								<li>
									<a>
										<label class="icon-choose">
										<i style="border-radius: 50%; background: #1e1f21;"></i>
										<itempropertyname>撒浪黑</itempropertyname><br>
										</label>
										<div class="icon-color-opacity"></div>
									</a>
								</li>
								<li>
									<a>
										<label class="icon-choose">
										<i style="border-radius: 50%; background: #bc322f;"></i>
										<itempropertyname>锦鲤红</itempropertyname><br>
										</label>
										<div class="icon-color-opacity"></div>
									</a>
								</li>
							</ul>
						</div>
						<div class="engier">
							<label>内存</label>
							<ul>
								<li>
									<a>
										<label>
											<i></i>
											<itempropertyname>64GB ROM</itempropertyname><br><itempropertynameprice>*</itempropertynameprice><br>
										</label>
									</a>
								</li>
								<li>
									<a>
										<label>
											<i></i>
											<itempropertyname>128GB ROM</itempropertyname><br><itempropertynameprice>*</itempropertynameprice><br>
										</label>
									</a>
								</li>
							</ul>
						</div>
					    <div class="price">
					    	<label>价格</label>
					    	<div class="sam-block-background">
					    	<div class="sam-block-text">
					    		<p class="sam-block-text">
					    			<b id="propertnames">花木蓝 + 6GB RAM 64GB ROM + 公开版 </b>
					    		</p>
					    	</div>
					    	<div class="sam-block-right">
					    		<p class="sam-block-deposit">
					    			<span myattrid="salePrice">￥1,799.00</span>
					    		</p>
					    	</div>
					    	</div>
					    </div>
					    <div class="addcart">
					    	<a class="btn-addCart">加入购物车</a>
					    </div>
					</div>
				</div>
			</div>
		</div>

        <div class="centerfooter">
				<div class="product-nav" id="titletab">
					<ul>
						<li>
							<a>
								<b>Galaxy A6s</b>
							</a>
						</li>
						<li class="is-active"  title="0">
							<a>商品动态</a>
						</li>
						<li  title="1">
							<a>规格参数</a>
						</li>
						<li  title="2">
							<a>相关推荐</a>
						</li>
					</ul>
				</div>
				<div class="productlist">
				<div class="box1 boxlist">
					<div class="bigBox">
						<h1>灵动色彩<span>&nbsp;跃然炫目</span></h1>
						<h2>俏皮梦幻花仙紫</h2>
						<p>给您每一眼的心动，让喜爱无从言说。Galaxy A6s双面2.5D玻璃机身，让色彩之美如花朵绽放般鲜活亮丽。梦幻的色彩随机身由浅及深，飘荡着木槿、丁香、薰衣草般的浪漫气息，犹如俏皮的少女灵动瞩目。</p>
						</div>
						<div class="boximg">
							<ul>
								<li>
									<img src="img/box1.jpg" />
								</li>
								<li>
									<img src="img/box2.png" />
								</li>
								<li>
									<img src="img/box3.jpg" />
								</li>
							</ul>
						</div>
						<div class="bigBox">
						<h1>大片风采<span>&nbsp;轻松定格</span></h1>
						<p class="jieshao">适合拍照效果才是美。Galaxy A6s基于大数据下的专业功能配置，留住您不一样的美，背景虚化、七大光效、智能场景识别以及视频美颜等功能，让您惊艳于拍摄乐趣，不修图依旧赏心悦目。</p>
						</div>
						<div class="boximg">
							<ul>
								<li>
									<img src="img/box4.jpg" />
								</li>
								<li>
									<img src="img/box5.jpg" />
								</li>
								<li>
									<img src="img/box6.jpg" />
								</li>
							</ul>
						</div>
				</div>
				<div class="box2 boxlist">
					<a>规格参数</a>
					<div class="spec-section">
   					<div class="spec-list"> 
    					<h4 class="spec-title">处理器</h4> 
    					<ul> 
     					<li>
     						<h5 class="spec-sub-title">CPU主频</h5>
     						<p>2.2GHz, 1.8GHz</p>
     					</li> 
     					<li>
     						<h5 class="spec-sub-title">CPU核数</h5>
     						<p>八核</p>
     					</li> 
    					</ul> 
   					</div> 
   					<div class="spec-list"> 
    					<h4 class="spec-title">显示屏</h4> 
    					<ul> 
     					<li>
     						<h5 class="spec-sub-title">尺寸</h5>
     						<p>6.0英寸(直角)/5.9英寸(圆角)*<br>*6.0英寸是显示屏圆角拉伸为直角时的对角线长度， 5.9英寸是圆角对角线长度</p>
     					</li> 
     					<li>
     						<h5 class="spec-sub-title">分辨率</h5>
     						<p>2160 x 1080 (FHD+)</p>
     					</li> 
     					<li>
     						<h5 class="spec-sub-title">类型</h5>
     						<p>PLS TFT LCD</p>
     					</li> 
     					<li>
     						<h5 class="spec-sub-title">色彩</h5>
     						<p>1600万色</p>
     					</li> 
    					</ul> 
   					</div>
   					</div>
				</div>
				<div class="box3 boxlist">
					<a>相关推荐</a>
					<div class="row">
						<div class="col">
						    <div class="thumbnail">
							    <a href="##">
							    <img src="img/phonelist1.jpg" alt="">
							    <h2>Galaxy Note9</h2>
							    </a>
							    <p>¥6999.00</p>
							</div>
						</div>
						<div class="col">
							<div class="thumbnail">
								<a href="##">
								<img src="img/phonelist2.jpg" alt="">
								<h2>Galaxy A6s</h2>
								</a>
								<p>¥1799.00</p>
							</div>
						</div>
						<div class="col">
							<div class="thumbnail">
								<a href="##">
								<img src="img/phonelist3.jpg" alt="">
								<h2>Galaxy S9</h2>
								</a>
								<p>¥4499.00</p>
							</div>
						</div>
						<div class="co">
							<div class="thumbnail">
								<a href="##">
								<img src="img/phonelist4.jpg" alt="">
								<h2>盖乐世 S8</h2>
								</a>
								<p>¥3999.00</p>
							</div>
						</div>
					</div>
				</div>
			</div>
        </div> 
        
		<div class="footer">
			<div class="footertop">
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">我的三星</a>
					</li>
					<li>
						<a href="##">我的订单</a>
					</li>
					<li>
						<a href="##">我的评分</a>
					</li>
					<li>
						<a href="##">优惠券</a>
					</li>
					<li>
						<a href="##">个人资料</a>
					</li>
					<li>
						<a href="##">收货地点</a>
					</li>
					<li>
						<a href="##">售后网点查询</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">网上购物商城</a>
					</li>
					<li>
						<a href="##">购物指南</a>
					</li>
					<li>
						<a href="##">支付方式</a>
					</li>
					<li>
						<a href="##">订单及发票</a>
					</li>
					<li>
						<a href="##">关于配送</a>
					</li>
					<li>
						<a href="##">售后服务</a>
					</li>
					<li>
						<a href="##">会员及优惠</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">服务支持</a>
					</li>
					<li>
						<a href="##">常见问题</a>
					</li>
					<li>
						<a href="##">关于商城</a>
					</li>
					<li>
						<a href="##">关于三星</a>
					</li>
					<li>
						<a href="##">联系我们</a>
					</li>
					<li>
						<a href="##">使用条款</a>
					</li>
					<li>
						<a href="##">加为书签</a>
					</li>
				</ul> 
				<div class="way">
				<div class="sharing">官方分享</div>
			    <div class="sharingbtn">
				    <a href="##" class="weibo"></a>
				    <a href="##" class="wechat"></a>
			</div>
			</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
    //商品详情大图切换
	$("#smallpic img").click(function(){
    	var imgsrc = $(this).attr("src");
    	$("#bigimg").attr("src",imgsrc);
    })
	
	//商品详情tab切换
	var titletab = document.getElementById("titletab");
    var liNodes = titletab.getElementsByTagName("li");
	var divList = document.getElementsByClassName("boxlist");
		
	for(var i = 0; i < liNodes.length; i++) {
	liNodes[i].onmouseover = function() {
		for(var j = 0; j < liNodes.length; j++) {
			liNodes[j].className = "";
		}
		this.className = "is-active";
		for(var m = 0; m < divList.length; m++) {
			if(m == this.getAttribute("title")) {
				divList[m].style.display = "block";
			}
			else {
				divList[m].style.display = "none";
			}
		}
	}
}
	
	
	$(".choose ul li, .engier ul li").click(function(){
		$(".choose ul li, .engier ul li").removeClass("active");
		$(this).addClass("active");
	})
	</script>
</html>
